<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>商城</title>
	<link rel="stylesheet" href="style/base.css" type="text/css">
	<link rel="stylesheet" href="style/global.css" type="text/css">
	<link rel="stylesheet" href="style/header.css" type="text/css">
	<link rel="stylesheet" href="style/index.css" type="text/css">
	<link rel="stylesheet" href="style/bottomnav.css" type="text/css">
	<link rel="stylesheet" href="style/footer.css" type="text/css">

	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/header.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	
</head>
<body>
<div id="app">
	<!-- 顶部导航 start -->
	<topnav></topnav>
	<!-- 顶部导航 end -->
	
	<div style="clear:both;"></div>

	<!-- 头部 start -->
	<div class="header w1210 bc mt15">
		<!-- 头部上半部分 start 包括 logo、搜索、用户中心和购物车结算 -->
		<searchui></searchui>
		<!-- 头部上半部分 end -->
		
		<div style="clear:both;"></div>

		<!-- 导航条部分 start -->
		<div class="nav w1210 bc mt10">
			<!--  商品分类部分 start-->
			<div class="category fl"> <!-- 非首页，需要添加cat1类 -->
				<div class="cat_hd">  <!-- 注意，首页在此div上只需要添加cat_hd类，非首页，默认收缩分类时添加上off类，鼠标滑过时展开菜单则将off类换成on类 -->
					<h2>全部商品分类</h2>
					<em></em>
				</div>
				
				<div class="cat_bd">
					<!--分类-->
					<div class="cat" v-for="c in categoryList">
						<h3><a href="">{{c.catName}}</a><b></b></h3>
						<div class="cat_detail none">
							<dl class="dl_1st" v-for="cc,index in c.children">
									<dt><a href="" >{{cc.catName}}</a></dt>
									<dd>
										<a v-for="ccc in cc.children" :href="'list.html?cat_id='+ccc.id">{{ccc.catName}}</a>				
									</dd>
								</dl>
						</div>
					</div>

				</div>

			</div>
			<!--  商品分类部分 end--> 

			<div class="navitems fl">
				<ul class="fl">
					<li class="current"><a href="">首页</a></li>
					<li><a href="">电脑频道</a></li>
					<li><a href="">家用电器</a></li>
					<li><a href="">品牌大全</a></li>
					<li><a href="">团购</a></li>
					<li><a href="">积分商城</a></li>
					<li><a href="">夺宝奇兵</a></li>
				</ul>
				<div class="right_corner fl"></div>
			</div>
		</div>
		<!-- 导航条部分 end -->
	</div>
	<!-- 头部 end-->
	
	<div style="clear:both;"></div>
	
	<!-- 综合区域 start 包括幻灯展示，商城快报 -->
	<div class="colligate w1210 bc mt10">
		<!-- 幻灯区域 start -->
		<div class="slide fl">
			<div class="area">
				<div class="slide_items">
					<ul>
						<li><a href=""><img src="images/index_slide1.jpg" alt="" /></a></li>
						<li><a href=""><img src="images/index_slide2.jpg" alt="" /></a></li>
						<li><a href=""><img src="images/index_slide3.jpg" alt="" /></a></li>
						<li><a href=""><img src="images/index_slide4.jpg" alt="" /></a></li>
						<li><a href=""><img src="images/index_slide5.jpg" alt="" /></a></li>
						<li><a href=""><img src="images/index_slide6.jpg" alt="" /></a></li>
					</ul>
				</div>
				<div class="slide_controls">
					<ul>
						<li class="on">1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 幻灯区域 end-->
	
		<!-- 快报区域 start-->
		<div class="coll_right fl ml10">
			<div class="ad"><a href=""><img src="images/ad.jpg" alt="" /></a></div>
			
			<div class="news mt10">
				<h2><a href="">更多快报&nbsp;></a><strong>网站快报</strong></h2>
				<ul>
					<li v-for="(news,index) in topNews" :class="{odd:index%2}"><a href="">{{news.title}}</a></li>
				</ul>
			</div>
			
			<div class="service mt10">
				<h2>
					<span class="title1 on"><a href="">话费</a></span>
					<span><a href="">旅行</a></span>
					<span><a href="">彩票</a></span>
					<span class="title4"><a href="">游戏</a></span>
				</h2>
				<div class="service_wrap">
					<!-- 话费 start -->
					<div class="fare">
						<form action="">
							<ul>
								<li>
									<label for="">手机号：</label>
									<input type="text" name="phone" value="请输入手机号" class="phone" />
									<p class="msg">支持移动、联通、电信</p>
								</li>
								<li>
									<label for="">面值：</label>
									<select name="" id="">
										<option value="">10元</option>
										<option value="">20元</option>
										<option value="">30元</option>
										<option value="">50元</option>
										<option value="" selected>100元</option> 
										<option value="">200元</option>
										<option value="">300元</option>
										<option value="">400元</option>
										<option value="">500元</option>
									</select>
									<strong>98.60-99.60</strong>
								</li>
								<li>
									<label for="">&nbsp;</label>
									<input type="submit" value="点击充值" class="fare_btn" /> <span><a href="">北京青春怒放独家套票</a></span>
								</li>
							</ul>
						</form>
					</div>
					<!-- 话费 start -->
	
					<!-- 旅行 start -->
					<div class="travel none">
						<ul>
							<li>
								<a href=""><img src="images/holiday.jpg" alt="" /></a>
								<a href="" class="button">度假查询</a>
							</li>
							<li>
								<a href=""><img src="images/scenic.jpg" alt="" /></a>
								<a href="" class="button">景点查询</a>
							</li>
						</ul>
					</div>
					<!-- 旅行 end -->
						
					<!-- 彩票 start -->
					<div class="lottery none">
						<p><img src="images/lottery.jpg" alt="" /></p>
					</div>
					<!-- 彩票 end -->

					<!-- 游戏 start -->
					<div class="game none">
						<ul>
							<li><a href=""><img src="images/sanguo.jpg" alt="" /></a></li>
							<li><a href=""><img src="images/taohua.jpg" alt="" /></a></li>
							<li><a href=""><img src="images/wulin.jpg" alt="" /></a></li>
						</ul>
					</div>
					<!-- 游戏 end -->
				</div>
			</div>

		</div>
		<!-- 快报区域 end-->
	</div>
	<!-- -综合区域 end -->
	
	<div style="clear:both;"></div>

	<!-- 导购区域 start -->
	<div class="guide w1210 bc mt15">
		<!-- 导购左边区域 start -->
		<div class="guide_content fl">
			<h2>
				<span class="on">疯狂抢购</span>
				<span>热卖商品</span>
				<span>推荐商品</span>
				<span>新品上架</span>
				<span class="last">猜您喜欢</span>
			</h2>
			
			<div class="guide_wrap">
				<!-- 疯狂抢购 start-->
				<div class="crazy">
					<ul>
						<li>
							<dl>
								<dt><a href=""><img src="images/crazy1.jpg" alt="" /></a></dt>
								<dd><a href="">惠普G4-1332TX 14英寸</a></dd>
								<dd><span>售价：</span><strong> ￥2999.00</strong></dd>
							</dl>
						</li>
						<li>
							<dl>
								<dt><a href=""><img src="images/crazy2.jpg" alt="" /></a></dt>
								<dd><a href="">直降100元！TCL118升冰箱</a></dd>
								<dd><span>售价：</span><strong> ￥800.00</strong></dd>
							</dl>
						</li>
						<li>
							<dl>
								<dt><a href=""><img src="images/crazy3.jpg" alt="" /></a></dt>
								<dd><a href="">康佳液晶37寸电视机</a></dd>
								<dd><span>售价：</span><strong> ￥2799.00</strong></dd>
							</dl>
						</li>
						<li>
							<dl>
								<dt><a href=""><img src="images/crazy4.jpg" alt="" /></a></dt>
								<dd><a href="">梨子平板电脑7.9寸</a></dd>
								<dd><span>售价：</span><strong> ￥1999.00</strong></dd>
							</dl>
						</li>
						<li>
							<dl>
								<dt><a href=""><img src="images/crazy5.jpg" alt="" /></a></dt>
								<dd><a href="">好声音耳机</a></dd>
								<dd><span>售价：</span><strong> ￥199.00</strong></dd>
							</dl>
						</li>
					</ul>	
				</div>
				<!-- 疯狂抢购 end-->

				<!-- 热卖商品 start -->
				<div class="hot none">
					<ul>
						<li>
							<dl>
								<dt><a href=""><img src="images/hot1.jpg" alt="" /></a></dt>
								<dd><a href="">索尼双核五英寸四核手机！</a></dd>
								<dd><span>售价：</span><strong> ￥1386.00</strong></dd>
							</dl>
						</li>
						<li>
							<dl>
								<dt><a href=""><img src="images/hot2.jpg" alt="" /></a></dt>
								<dd><a href="">华为通话平板仅需969元！</a></dd>
								<dd><span>售价：</span><strong> ￥969.00</strong></dd>
							</dl>
						</li>
						<li>
							<dl>
								<dt><a href=""><img src="images/hot3.jpg" alt="" /></a></dt>
								<dd><a href="">卡姿兰明星单品7件彩妆套装</a></dd>
								<dd><span>售价：</span><strong> ￥169.00</strong></dd>
							</dl>
						</li>
					</ul>
				</div>
				<!-- 热卖商品 end -->

				<!-- 推荐商品 atart -->
				<div class="recommend none">
					<ul>
						<li>
							<dl>
								<dt><a href=""><img src="images/recommend1.jpg" alt="" /></a></dt>
								<dd><a href="">黄飞红麻辣花生整箱特惠装</a></dd>
								<dd><span>售价：</span><strong> ￥139.00</strong></dd>
							</dl>
						</li>
						<li>
							<dl>
								<dt><a href=""><img src="images/recommend2.jpg" alt="" /></a></dt>
								<dd><a href="">戴尔IN1940MW 19英寸LE</a></dd>
								<dd><span>售价：</span><strong> ￥679.00</strong></dd>
							</dl>
						</li>
						<li>
							<dl>
								<dt><a href=""><img src="images/recommend3.jpg" alt="" /></a></dt>
								<dd><a href="">罗辑思维音频车载CD</a></dd>
								<dd><span>售价：</span><strong> ￥24.80</strong></dd>
							</dl>
						</li>
					</ul>
				</div>
				<!-- 推荐商品 end -->
			
				<!-- 新品上架 start-->
				<div class="new none">
					<ul>
						<li>
							<dl>
								<dt><a href=""><img src="images/new1.jpg" alt="" /></a></dt>
								<dd><a href="">E路航T70超薄GPS 7寸大屏！</a></dd>
								<dd><span>售价：</span><strong> ￥369.00</strong></dd>
							</dl>
						</li>
						<li>
							<dl>
								<dt><a href=""><img src="images/new2.jpg" alt="" /></a></dt>
								<dd><a href="">乐和居 爆品 特价疯狂抢</a></dd>
								<dd><span>售价：</span><strong> ￥2799.00</strong></dd>
							</dl>
						</li>
						<li>
							<dl>
								<dt><a href=""><img src="images/new3.jpg" alt="" /></a></dt>
								<dd><a href="">北欧 套装 抄底再续最后几小时</a></dd>
								<dd><span>售价：</span><strong> ￥999.00</strong></dd>
							</dl>
						</li>
					</ul>
				</div>
				<!-- 新品上架 end-->

				<!-- 猜您喜欢 start -->
				<div class="guess none">
					<ul>
						<li>
							<dl>
								<dt><a href=""><img src="images/guess1.jpg" alt="" /></a></dt>
								<dd><a href="">Thinkpad USB光电鼠标</a></dd>
								<dd><span>售价：</span><strong> ￥39.00</strong></dd>
							</dl>
						</li>
						<li>
							<dl>
								<dt><a href=""><img src="images/guess2.jpg" alt="" /></a></dt>
								<dd><a href="">宜客莱（ECOLA）电脑散热器</a></dd>
								<dd><span>售价：</span><strong> ￥89.00</strong></dd>
							</dl>
						</li>
						<li>
							<dl>
								<dt><a href=""><img src="images/guess3.jpg" alt="" /></a></dt>
								<dd><a href="">巴黎欧莱雅男士洁面膏 100ml</a></dd>
								<dd><span>售价：</span><strong> ￥30.00</strong></dd>
							</dl>
						</li>
					</ul>
				</div>
				<!-- 猜您喜欢 end -->

			</div>

		</div>
		<!-- 导购左边区域 end -->
		
		<!-- 侧栏 网站首发 start-->
		<div class="sidebar fl ml10">
			<h2><strong>网站首发</strong></h2>
			<div class="sidebar_wrap">
				<dl class="first">
					<dt class="fl"><a href="goods.html"><img src="images/viewsonic.jpg" alt="" /></a></dt>
					<dd><strong><a href="">ViewSonic优派N710 </a></strong> <em>首发</em></dd>
					<dd>苹果iphone 5免费送！攀高作为全球智能语音血压计领导品牌，新推出的黑金刚高端智能电子血压计，改变传统测量方式让血压测量迈入一体化时代。</dd>
				</dl>

				<dl>
					<dt class="fr"><a href=""><img src="images/samsung.jpg" alt="" /></a></dt>
					<dd><strong><a href="">Samsung三星Galaxy</a></strong> <em>首发</em></dd>
					<dd>电视百科全书，360°无死角操控，感受智能新体验！双核CPU+双核GPU+MEMC运动防抖，58寸大屏打造全新视听盛宴！</dd>
				</dl>
			</div>
			

		</div>
		<!-- 侧栏 网站首发 end -->
		
	</div>
	<!-- 导购区域 end -->
	
	<div style="clear:both;"></div>

	<!--1F 电脑办公 start -->
	<div class="floor1 floor w1210 bc mt10" v-for="floor in floors">
		<!-- 1F 左侧 start -->
		<div class="floor_left fl">
			<!-- 商品分类信息 start-->
			<div class="cate fl">
				<h2>大分类：{{floor.floor_name}}</h2>
				<div class="cate_wrap">
					<ul>
						<li v-for="subcate in floor.sub_categorys"><a href=""><b>.</b>{{subcate.cat_name}}</a></li>
					</ul>
					<p v-for="left_ad in floor"><a href=""><img :src="left_ad.img" alt="" /></a></p>
				</div>
				

			</div>
			<!-- 商品分类信息 end-->

			<!-- 商品列表信息 start-->
			<div class="goodslist fl">
				<h2>
					<span class="on">推荐商品</span>
					<span v-for="rec_categorys in floor.rec_categorys">{{rec_categorys.cat_name}}</span>
				</h2>
				<div class="goodslist_wrap">
					<div>
						<ul>
							<li v-for="goods in floor.rec_goods">
								<dl >
									<dt><a :href="'goods.html?id='+goods.id"><img :src="goods.logo" alt="" /></a></dt>
									<dd><a :href="'goods.html?id='+goods.id">{{goods.goods_name}}</a></dd>
									<dd><span>售价：</span> <strong>￥{{goods.price}}</strong></dd>
								</dl>
							</li>

						</ul>
					</div>
					
					<div class="none" v-for="rec_categorys in floor.rec_categorys">
						<ul>
							<li v-for="goods in rec_categorys.goods">
								<dl>
									<dt><a :href="'goods.html?id='+goods.id"><img :src="goods.logo" alt="" /></a></dt>
									<dd><a :href="'goods.html?id='+goods.id">{{goods.goods_name}}</a></dd>
									<dd><span>售价：</span> <strong>￥{{goods.price}}</strong></dd>
								</dl>
							</li>
						</ul>
					</div>

				</div>
			</div>
			<!-- 商品列表信息 end-->
		</div>
		<!-- 1F 左侧 end -->
		
		<!-- 右侧 start -->
		<div class="sidebar fl ml10">
			<!-- 品牌旗舰店 start -->
			<div class="brand">
				<h2><a href="">更多品牌&nbsp;></a><strong>品牌旗舰店</strong></h2>
				<div class="sidebar_wrap">
					<ul>
						<li v-for="fb in floor.brands"><a href=""><img :src="fb.logo" alt=""/></a></li>
					</ul>
				</div>
			</div>
			<!-- 品牌旗舰店 end -->
			
			<!-- 分类资讯 start -->
			<div class="info mt10">
				<h2><strong>分类资讯</strong></h2>
				<div class="sidebar_wrap">
					<ul>
						<li v-for="news in floor.news"><a href=""><b>.</b>{{news.title}}</a></li>
					</ul>
				</div>
				
			</div>
			<!-- 分类资讯 end -->
			
			<!-- 右侧广告 start -->
			<div class="ads mt10">
				<a href=""><img :src="floor.right_ad.img" alt="" /></a>
			</div>
			<!-- 广告 end -->
		</div>
		<!-- 右侧 end -->

	</div>
	<!--1F 电脑办公 start -->

	
	<div style="clear:both;"></div>

	<!-- 底部导航 start -->
	<div class="bottomnav w1210 bc mt10">
		<div class="bnav1">
			<h3><b></b> <em>购物指南</em></h3>
			<ul>
				<li><a href="">购物流程</a></li>
				<li><a href="">会员介绍</a></li>
				<li><a href="">团购/机票/充值/点卡</a></li>
				<li><a href="">常见问题</a></li>
				<li><a href="">大家电</a></li>
				<li><a href="">联系客服</a></li>
			</ul>
		</div>
		
		<div class="bnav2">
			<h3><b></b> <em>配送方式</em></h3>
			<ul>
				<li><a href="">上门自提</a></li>
				<li><a href="">快速运输</a></li>
				<li><a href="">特快专递（EMS）</a></li>
				<li><a href="">如何送礼</a></li>
				<li><a href="">海外购物</a></li>
			</ul>
		</div>

		
		<div class="bnav3">
			<h3><b></b> <em>支付方式</em></h3>
			<ul>
				<li><a href="">货到付款</a></li>
				<li><a href="">在线支付</a></li>
				<li><a href="">分期付款</a></li>
				<li><a href="">邮局汇款</a></li>
				<li><a href="">公司转账</a></li>
			</ul>
		</div>

		<div class="bnav4">
			<h3><b></b> <em>售后服务</em></h3>
			<ul>
				<li><a href="">退换货政策</a></li>
				<li><a href="">退换货流程</a></li>
				<li><a href="">价格保护</a></li>
				<li><a href="">退款说明</a></li>
				<li><a href="">返修/退换货</a></li>
				<li><a href="">退款申请</a></li>
			</ul>
		</div>

		<div class="bnav5">
			<h3><b></b> <em>特色服务</em></h3>
			<ul>
				<li><a href="">夺宝岛</a></li>
				<li><a href="">DIY装机</a></li>
				<li><a href="">延保服务</a></li>
				<li><a href="">家电下乡</a></li>
				<li><a href="">京东礼品卡</a></li>
				<li><a href="">能效补贴</a></li>
			</ul>
		</div>
	</div>
	<!-- 底部导航 end -->

	<div style="clear:both;"></div>
	<!-- 底部版权 start -->
	<div class="footer w1210 bc mt10">
		<p class="links">
			<a href="">关于我们</a> |
			<a href="">联系我们</a> |
			<a href="">人才招聘</a> |
			<a href="">商家入驻</a> |
			<a href="">千寻网</a> |
			<a href="">奢侈品网</a> |
			<a href="">广告服务</a> |
			<a href="">移动终端</a> |
			<a href="">友情链接</a> |
			<a href="">销售联盟</a> |
			<a href="">商城论坛</a>
		</p>
		<p class="copyright">
			 © 2005-2013 京东网上商城 版权所有，并保留所有权利。  ICP备案证书号:京ICP证070359号 
		</p>
		<p class="auth">
			<a href=""><img src="images/xin.png" alt="" /></a>
			<a href=""><img src="images/kexin.jpg" alt="" /></a>
			<a href=""><img src="images/police.jpg" alt="" /></a>
			<a href=""><img src="images/beian.gif" alt="" /></a>
		</p>
	</div>
	<!-- 底部版权 end -->
</div>
	<script src="js/vue-2.5.17.js"></script>	<!--vue-->
	<script src="js/axios-0.18.0.js"></script>	<!--axios-->
	<script src="http://mockjs.com/dist/mock.js"></script><!--mock官方-->
	<script src="js/mock-min.js"></script>
	<script src="js/mock.js"></script><!--mock数据-->
	<script src="js/api.js"></script><!--api自定义-->
	<script src="components/TopNav.js"></script><!--组件-->
	<script src="components/searchUI.js"></script><!--组件搜索-->	
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				categoryList:[],	//分类集合
				topNews:[],			//网站快报
				floors:[]			//楼层功能
			},
			created(){
				//数据加载就删除搜索关键字
				sessionStorage.removeItem("keyword")
				sessionStorage.clear
				this.findAllMenu()
				this.findzTopNews()
				this.findAllFloors()
			},
			updated(){
				//导航菜单效果
				$(".cat").hover(function(){
					$(this).find(".cat_detail").show();
					$(this).find("h3").addClass("on");
				},function(){
					$(this).find(".cat_detail").hide();
					$(this).find("h3").removeClass("on");
				});
				//各楼层区域切换
				$(".goodslist h2 span").mouseover(function(){
					$(this).addClass("on").siblings().removeClass("on");
					$(this).parent().next(".goodslist_wrap").find("div").hide().eq($(this).index()).show();
				});
			},
			methods:{
				//查询所有分类
				findAllMenu(){
					menuAll().then(res=>{
						console.log(res.data.data)
						this.categoryList=res.data.data
					})
				},
				//查询网站快报
				findzTopNews(){
					getTopNews().then(res=>{
						this.topNews = res.data.data
					})
				},
				//查询楼层功能
				findAllFloors(){
					floorAll().then(res=>{
						this.floors = res.data.data
						console.log(res.data.data)
					})
				}
			}
		})
			
	</script>
</body>
</html>